/**
 * 猜你喜欢模块
 */
import React, {Component} from 'react';
import {View, StyleSheet, Text, ListView, TouchableOpacity, Image} from  'react-native';
import BottomCommonCell from './BottomCommonCell';
let dimension = require('Dimensions');
let {width, height} = dimension.get('window');
let GeustYouLikeData = require('../../Data/HomeGeustYouLike.json');
let advertising = require('../../img/free/advertising.png');
let request=require('../../utils/request');
export default class GeustYouLike extends Component {
    constructor(props) {
        super(props);
        // let ds = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2});
        this.state = {
            dataSource: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2})
        };
        GeustYouLike.dealWithImgUrl = GeustYouLike.dealWithImgUrl.bind(this)
    }

    render() {
        return (
            <View style={styles.container}>
                <BottomCommonCell leftIcon="heartbeat" leftTitle='猜你喜欢'/>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}

                />
            </View>
        )
    }

    renderRow(rowData) {
        return (
            <TouchableOpacity onPress={()=>{alert("asd")}}>
                <View style={styles.listViewStyle}>
                    <Image source={{uri:GeustYouLike.dealWithImgUrl(rowData.imageUrl)}} style={styles.imageStyle}/>
                    <View style={styles.rightViewStyle}>
                        <View style={styles.rightTopViewStyle}>
                            <Text>{rowData.title}</Text>
                            <Text>{rowData.TopRightInfo}</Text>
                        </View>
                        <Text style={{color:'gray'}}>{rowData.subTitle}</Text>
                        <View style={styles.rightBottomViewStyle}>
                            <Text style={{color:'red'}}>{rowData.subMessage}</Text>
                            <Text>{rowData.bottonRightInfo}</Text>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }

    static dealWithImgUrl(url) {
        if (url.search('w.h') == -1) { // 没有找到,正常返回
            return url;
        } else {
            return url.replace('w.h', '120.90');
        }
    }

    componentDidMount() {
        this.loadDataFormNet();
    }

    loadDataFormNet() {
        fetch(this.props.api_url)
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData.data)
                })
            })
            .catch((error) => {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(GeustYouLikeData.data)
                })
            })
        // request.get(this.props.api_url).then((responseData)=>{
        //     this.setState({
        //         dataSource: this.state.dataSource.cloneWithRows(responseData.data)
        //     })
        // })
    }
}
GeustYouLike.propTypes = {
    api_url: React.PropTypes.string
};
GeustYouLike.defaultProps = {
    api_url: 'http://api.meituan.com/group/v2/recommend/homepage/city/20?userId=160495643&userid=160495643&__vhost=api.mobile.meituan.com&position=23.134643%2C113.373951&movieBundleVersion=100&utm_term=6.6&limit=40&wifi-mac=64%3A09%3A80%3A10%3A15%3A27&ci=20&__skcy=X6Jxu5SCaijU80yX5ioQuvCDKj4%3D&__skua=5657981d60b5e2d83e9c64b453063ada&__skts=1459731016.350255&wifi-name=Xiaomi_1526&client=iphone&uuid=5C7B6342814C7B496D836A69C872202B5DE8DB689A2D777DFC717E10FC0B4271&__skno=FEB757F5-6120-49EC-85B0-D1444A2C2E7B&utm_content=5C7B6342814C7B496D836A69C872202B5DE8DB689A2D777DFC717E10FC0B4271&utm_source=AppStore&utm_medium=iphone&version_name=6.6&wifi-cur=0&wifi-strength=&offset=0&utm_campaign=AgroupBgroupD100H0&__skck=3c0cf64e4b039997339ed8fec4cddf05&msid=0FA91DDF-BF5B-4DA2-B05D-FA2032F30C6C2016-04-04-08-38594'
};
const styles = StyleSheet.create({
    container: {
        marginTop: 15
    },
    imageStyle: {
        width: 120,
        height: 90
    },
    listViewStyle: {
        backgroundColor: 'white',
        padding: 10,
        borderBottomColor: '#e8e8e8',
        borderBottomWidth: 0.5,
        flexDirection: 'row'
    },
    rightViewStyle: {
        marginLeft: 8,
        width: width-10-8-120,
        justifyContent: 'center'
    },
    rightTopViewStyle: {
        flexDirection: 'row',
        marginBottom: 7,
        justifyContent: 'space-between'
    },
    rightBottomViewStyle: {
        flexDirection: 'row',
        marginBottom: 7,
        justifyContent: 'space-between'
    }
});
